<template>
  <el-upload v-bind="uploadProp" :accept="accept">
    <div v-loading="uploading">
      <div class="btn-40 btn-img hover">
        <span class="icon-img upload"></span>
      </div>
    </div>
    <!-- <el-button class="btn-common" :icon="uploading ? 'el-icon-loading' : 'el-icon-upload2'"/> -->
  </el-upload>
</template>

<script>
import {MessageBox} from 'element-ui'
export default {
  props: {
    accept: {
      type: String,
      default: '.doc,.docx,.pdf'
    }
  },
  data() {
    return {
      uploading: false,
      uploadProp: {
        action: process.env.VUE_APP_BASE_API + '/attach/upload',
        'show-file-list': false,
        // accept: '.doc,.docx,.pdf',
        'on-progress': this.uploadProgress,
        'on-success': this.uploadSuccess,
        'on-error': this.uploadError,
        'before-upload': this.beforeUpload
      }
    }
  },
  methods: {
    beforeUpload() {
      this.uploading = true
    },
    uploadProgress(event) {
      // console.log(event)
    },
    uploadSuccess(response) {

      if (response.msg == '未登录') {
        this.$message.warning('登录状态已过期，重新登录');
        this.$store.commit('SET_USER_INFO', {})
        location.href = '/';
        // return MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
        //     confirmButtonText: '重新登录',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }
        // ).then(() => {
        //   this.$store.commit('SET_USER_INFO', {})
        //   location.href = '/';
        // })
      }
      if (response.code == 200) {
        let data = response.data
        this.$message.success('上传成功！')
        this.$emit('upload-success', {
          id: data.id,
          fileName: data.fileName
        })
      } else {
        this.$message.warning('上传失败！')
      }

      
      this.uploading = false
    },
    uploadError() {
      this.$message.warning('上传失败！')
      this.uploading = false
    }
  }
}
</script>

<style>

</style>